import {useState} from 'react';
import {View, Text, Button} from 'react-native';

// 思想 统一数据源 方便管理！！

// 数据和修改数据的函数 都定义在了父组件上
// 数据 父子传递子组件
// 修改数据的函数setNum 也传递给子组件！！  （函数也是普通数据中的一种））

// 子向父亲传递参数

type abc = React.Dispatch<React.SetStateAction<number>>;

export default function App() {
  // let num = 10;
  const [num, setNum] = useState(100);
  return (
    <View>
      <Text>========</Text>
      <Text>父组件的数字{num}</Text>
      <Child num={num} aaa={setNum} />
      <Text>--------</Text>
    </View>
  );
}

// 自组件
function Child({num, aaa}: {num: number; aaa: abc}) {
  // 普通数据 小跟班
  // useState 状态  ->  UI才会发生改变    少爷
  const add = () => {
    // 修改父组件的数据
    aaa(num + 1);
  };
  return (
    <View>
      <Text>Child</Text>
      <Text>子组件的数字{num}</Text>
      <Button title="增加计数1" onPress={add} />
      <Button title="增加计数2" onPress={add} />
    </View>
  );
}
